<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-04-11 11:08:53
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-26 09:47:54
 * @FilePath: /tea-garden-web/src/pages/farming-records.vue
 * @Description: 农事记录
-->
<template>
  <div class="farming-records">
    <div class="top-area">
      <i class="icon-button-back" @click="$router.push({ name: 'baseOverview' })" />
      <span class="page-name">农事记录</span>
      <section class="search-input" v-if="false">
        <input type="text" class="input" placeholder="地块名称、序号" :value="query" @input="setQuery" />
      </section>
    </div>
    <div class="left-area" v-loading="loading.annualSummary">
      <div class="annual-summary-item" :class="{ 'active-item': item.year_date === selectedYear }"
        v-for="(item, index) in annualSummary" :key="index" @click="setYear(item.year_date)">
        <section class="annual-summary-item-date">
          {{ item.year_date }}
        </section>
        <section class="annual-summary-item-count">
          {{ item.cnt }}
        </section>
      </div>
    </div>
    <div class="right-area" v-loading="loading.farmingRecordList">
      <!-- 遍历 farmingRecordList 数组 -->
      <section class="year-month-items" v-for="(monthData, Monthindex) in farmingRecordList" :key="Monthindex">
        <section class="year-month">
          {{ monthData.month }}
        </section>
        <section class="month-day-items" v-for="(dayData, dayIndex) in monthData.data" :key="dayIndex">
          <section class="month-day">
            {{ dayData.day }}
          </section>
          <section class="day-record-items" v-for="(recordData, recordIndex) in dayData.data" :key="recordIndex">
            <section class="record-title">
              <span class="record-type">{{ getDictItemNameById(recordData.farmingType) }}</span>
              <span class="record-status">{{ getDictItemNameById(recordData.state) }}</span>
            </section>
            <section class="record-content">
              <section class="record-content-item">
                <span class="record-content-item-name">地块：</span>
                <span class="record-content-item-value">{{ recordData.massifNum}}</span>
              </section>
              <section class="record-content-item" v-if="showKindLabel(recordData.farmingType)">
                <span class="record-content-item-name">{{ kindLabel(recordData.farmingType) }}：</span>
                <span class="record-content-item-value">{{ recordData.type }}</span>
              </section>
              <section class="record-content-item" v-if="showQuantityLabel(recordData.farmingType)">
                <span class="record-content-item-name">{{ quantityLabel(recordData.farmingType) }}：</span>
                <span class="record-content-item-value">{{ recordData.quantity }}</span>
              </section>
              <section class="record-content-item">
                <span class="record-content-item-name">人员：</span>
                <span class="record-content-item-value">{{ recordData.groupUser }}</span>
              </section>
              <!-- <section class="record-content-item">
                <span class="record-content-item-name">是否已提交问卷：</span>
                <span class="record-content-item-value">{{ recordData.is_feedback }}</span>
              </section> -->
            </section>
          </section>
        </section>
      </section>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('farming-records', ['query', 'annualSummary', 'selectedYear', 'farmingRecordList', 'loading']),
    ...mapState('base-overview', ['currentId']),
    ...mapGetters('common', ['getDictItemNameById'])
  },
  watch: {
    query () {
      // 筛选查询
    },
    selectedYear () {
      this.getFarmingRecordList()
    }
  },
  methods: {
    ...mapMutations('farming-records', ['setQuery', 'setYear']),
    ...mapActions('farming-records', ['getAnnualSummary', 'getFarmingRecordList']),
    showKindLabel (farmingType) {
      return [4, 9].findIndex((item) => item === farmingType) !== -1
    },
    kindLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 4:
          label = '肥料类型'
          break
        case 9:
          label = '药剂类型'
          break
      }
      return label
    },
    showQuantityLabel (farmingType) {
      return [3, 4, 5, 9].findIndex((item) => item === farmingType) !== -1
    },
    quantityLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 3:
          label = '采摘量'
          break
        case 4:
          label = '施肥量'
          break
        case 5:
          label = '灌溉量'
          break
        case 9:
          label = '药剂量'
          break
      }
      return label
    }
  },
  created () {
    this.getAnnualSummary()
  }
}
</script>

<style lang="scss">
.farming-records {
  height: 100%;
  overflow-y: auto;
  background: #eff7f8;
  position: relative;

  .top-area {
    position: relative;

    .icon-button-back {
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-back-03.png");
      background-size: cover;
      position: absolute;
      left: 27px;
      top: 30.5px;
    }

    .page-name {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #089bab;
      height: 25px;
      width: 100px;
      text-align: center;
      position: absolute;
      left: 52px;
      top: 27px;
    }

    .search-input {
      position: absolute;
      left: 252px;
      top: 25.5px;

      &::before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        width: 29px;
        height: 29px;
        background-image: url("/public/image/common/icon-button-search.png");
        background-size: cover;
        margin-right: 10px;
      }

      .input {
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid #9cd7dd;
        border-left: 0;
        width: 223.5px;
        height: 23px;
        line-height: 23px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #9cd7dd;
        background-color: transparent;
      }

      ::-webkit-input-placeholder {
        color: #9cd7dd;
        font-size: 14px;
      }
    }
  }

  .left-area {
    width: 232px;
    height: 620px;
    background: #ffffff;
    border-radius: 15px;
    position: absolute;
    left: 10px;
    top: 71.5px;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;

    .active-item {
      &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 4px;
        top: 0;
        height: 100%;
        background: rgba(254, 173, 84, 1);
      }
    }

    .annual-summary-item {
      height: 54.5px;
      border-top: 1px solid #EAEDF7;
      padding: 16px 19px 15px 20px;
      position: relative;

      .annual-summary-item-date {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089BAB;
        line-height: 23px;
      }

      .annual-summary-item-count {
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #979797;
        position: absolute;
        right: 19px;
        top: 21.5px;

        &::before {
          content: '总记录: ';
        }

        &::after {
          content: '条';
        }
      }
    }
  }

  .right-area {
    width: 1021px;
    height: 620px;
    background: #ffffff;
    border-radius: 15px;
    position: absolute;
    right: 7.5px;
    top: 71.5px;
    overflow-y: auto;
    overflow-x: hidden;

    .year-month-items {
      .year-month {
        height: 62px;
        font-size: 18px;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #089BAB;
        padding: 21.5px 46px 15.5px 29px;
        border-bottom: 1px solid #EAEDF7;
      }

      .month-day-items {
        .month-day {
          height: 57.5px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          line-height: 25px;
          padding: 20px 46px 12.5px 29px;

          &::before {
            content: '';
            width: 25px;
            height: 25px;
            background: url("/public/image/farming-records/icon-button-clock.png");
            background-size: cover;
            margin-right: 10px;
            display: inline-block;
            vertical-align: top;
          }
        }

        .day-record-items {
          height: 216px;
          background: rgba(254, 173, 84, 0.05);
          padding: 15.5px 46px 15.5px 25.5px;
          margin-bottom: 20px;

          &:last-of-type {
            margin-bottom: 0;
          }

          position: relative;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            width: 5px;
            top: 15.5px;
            bottom: 15.5px;
            background: linear-gradient(113deg, #FFE3DF 0%, #FD988B 100%);
            border-radius: 2px 2px 2px 2px;
          }

          .record-title {
            .record-type {
              display: inline-block;
              vertical-align: top;
              width: 50%;
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 800;
              color: #333333;
              line-height: 21px;
            }

            .record-status {
              display: inline-block;
              width: 50%;
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FF7EA8;
              text-align: right;
            }

            margin-bottom: 17.5px
          }

          .record-content {
            .record-content-item {
              font-size: 16px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 19px;
              margin-bottom: 7.5px;

              &:last-of-type {
                margin-bottom: 0;
              }

              .record-content-item-name {
                color: #979797;
              }

              .record-content-item-value {
                color: #333333;
              }
            }
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }
}</style>
